{%- liquid
  assign image_blocks = section.blocks | where: 'type', 'image'
  assign is_image_full_page_width = false
-%}
{%- for block in image_blocks -%}
  {%- if forloop.first and block.settings.full_page_width -%}
    {%- assign is_image_full_page_width = true -%}
  {%- endif -%}
  {%- if block.settings.desktop_image != blank -%}
    {%- style -%}
      .stacked-image-text__image-{{ block.id }} .adapt-to-image::before {
        padding-bottom: {{ 1 | divided_by: block.settings.desktop_image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
        width: 1px;
        margin-left: -1px;
      }
      @media screen and (max-width: 1023px) {
        .stacked-image-text__image-{{ block.id }} .adapt-to-image::before {
          padding-bottom: {{ 1 | divided_by: block.settings.mobile_image.aspect_ratio | times: 100 }}%;
        }
      }
    {%- endstyle -%}
  {%- endif -%}
{%- endfor -%}
{% if section.settings.background_color != 'bg-white' %}
  {% unless section.settings.background_color.blue == 0 and section.settings.background_color.green == 0 and section.settings.background_color.red == 0 %}
  {% capture customized_bg_class %}bg-section-{{ section.id }}{% endcapture %}
  <style>
    .{{ customized_bg_class }} {
      background-color: {{ section.settings.background_color }};
    }
</style>
{% endunless %}
{% endif %}

{%- liquid
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  if section.settings.background_color != 'bg-white'
    unless section.settings.background_color.blue == 0 and section.settings.background_color.green == 0 and section.settings.background_color.red == 0
      assign background_color = customized_bg_class
    endunless
  endif


  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  assign split_image_item_align = ''
  case section.settings.text_alignment
    when 'left'
      assign text_alignment = 'text-md-start'
      assign split_image_item_align = 'd-flex justify-content-md-start'
    when 'center'
      assign text_alignment = 'text-md-center'
      assign split_image_item_align = 'd-flex justify-content-md-center'
  endcase

  case section.settings.mobile_text_alignment
    when 'left'
      assign text_alignment = text_alignment | append: ' text-start'
      assign split_image_item_align = split_image_item_align | append: ' justify-content-start'
    when 'center'
      assign text_alignment = text_alignment | append: ' text-center'
      assign split_image_item_align = split_image_item_align | append: ' justify-content-center'
    else
      assign text_alignment = text_alignment | append: ''
  endcase

  assign enable_image_rounded = true
  assign image_width_along_with_container = false

  assign padding_to_full_section = section.settings.padding_to_full_section
  assign container_style = text_color | append: ' ' | append: text_alignment
  assign content_style = ''


  if background_color != 'bg-white' and padding_to_full_section
    assign container_style = container_style | append: ' py-section ' | append: background_color
  else
    assign container_style = container_style | append: ' '| append: section.settings.section_margin_top | append: ' ' | append: section.settings.section_margin_bottom | append: ' '
    assign content_style = content_style | append: background_color

    unless is_image_full_page_width
      assign container_style = container_style | append: ' container '
      assign image_width_along_with_container = true
    endunless
  endif

  if background_color != 'bg-white' and is_image_full_page_width != true
    assign content_style = content_style | append: ' rounded-3 overflow-hidden '
    if padding_to_full_section != true
      assign enable_image_rounded = false
    endif
  endif

  case section.settings.fontsize
    when 'display-4'
      assign bodysize = 'h4'
      assign mark = 'h2'
    when 'display-5'
      assign bodysize = 'h5'
      assign mark = 'h2'
    when 'h1'
      assign bodysize = 'lead'
      assign mark = 'h3'
    when 'h2'
      assign bodysize = 'lead'
      assign mark = 'h4'
    when 'h3'
      assign bodysize = ''
      assign mark = 'h5'
  endcase

-%}

{%- liquid
  assign show_stretched_link = false
  for block in section.blocks
    case block.type
      when 'button'
        if block.settings.button_link_1 != blank
          assign stretched_link = block.settings.button_link_1
          assign show_stretched_link = true
        elsif block.settings.button_link_2 != blank
          assign stretched_link = block.settings.button_link_2
          assign show_stretched_link = true
        else
          assign show_stretched_link = false
        endif
    endcase
  endfor
%}

<div class="stacked-image-text__container {{ container_style }}">
  <div class="{{ content_style }}">
    {%- for block in section.blocks -%}
      {%- liquid
        assign split_item_style = ''

        unless block.type == 'image'
          assign split_item_style = split_item_style | append: split_image_item_align
          if background_color != 'bg-white' or background_color == 'bg-white' and is_image_full_page_width
            assign split_item_style = split_item_style | append: ' container '
          endif
        endunless

        if forloop.first
          if block.type == 'image'
            assign split_item_style = split_item_style | append: ' mb-5 mb-md-6 '
          elsif block.type == 'button'
            assign split_item_style = split_item_style | append: ' mb-4 '
          else
            assign split_item_style = split_item_style | append: ' mb-2 '
          endif

          if block.type != 'image' and background_color != 'bg-white' and padding_to_full_section != true
            assign split_item_style = split_item_style | append: ' pt-6 '
          endif
        elsif forloop.last
          if block.type == 'image'
            assign split_item_style = split_item_style | append: ' mt-5 mt-md-6 '
          elsif block.type == 'button'
            assign split_item_style = split_item_style | append: ' mt-4 '
          else
            assign split_item_style = split_item_style | append: ' mt-2 '
          endif

          if block.type != 'image' and background_color != 'bg-white' and padding_to_full_section != true
            assign split_item_style = split_item_style | append: ' pb-6 '
          endif
        else
          if block.type == 'image'
            assign split_item_style = split_item_style | append: ' my-5 my-md-6 '
          elsif block.type == 'button'
            assign split_item_style = split_item_style | append: ' my-4 '
          else
            assign split_item_style = split_item_style | append: ' my-2 '
          endif
        endif
        -%}
      {%- case block.type -%}
        {%- when 'overline' -%}
          {%- if block.settings.overline != empty -%}
            <div class="{{ split_item_style }} {% unless padding_to_full_section or is_image_full_page_width %}px-0{% endunless %}">
              <div class="{{ section.settings.text_width }}">
                <p class="mb-0">{{ block.settings.overline }}</p>
              </div>
            </div>
          {%- endif -%}
        {%- when 'heading' -%}
          {%- if block.settings.heading != empty -%}
            <div class="{{ split_item_style }} {% unless padding_to_full_section or is_image_full_page_width %}px-0{% endunless %}">
              <div class="{{ section.settings.text_width }}">
                <{{ mark }} class="{{ section.settings.fontsize }} fw-bold mb-0">{{ block.settings.heading }}</{{ mark }}>
              </div>
            </div>
          {%- endif -%}
        {%- when 'text' -%}
          {%- if block.settings.text != empty -%}
            <div class="{{ split_item_style }} {% unless padding_to_full_section or is_image_full_page_width %}px-0{% endunless %}">
              <div class="{{ section.settings.text_width }}">
                <div class="{{ bodysize }} fw-normal no-last-margin richtext-with-link {{ richtext_link_style }} {% if block.settings.enlarge_text %}h4{% endif %}">
                  {{ block.settings.text }}
                </div>
              </div>
            </div>
          {%- endif -%}
        {%- when 'image' -%}
          {%- liquid
            case block.settings.image_height
              when 'small'
                assign image_height = 'h-4 h-lg-5'
              when 'medium'
                assign image_height = 'h-5 h-lg-7'
              when 'large'
                assign image_height = 'h-7 h-lg-9'
              when 'adapt_to_image'
                assign image_height = 'adapt-to-image'
              else
                assign image_height = ''
            endcase

            assign image_container_style = ''
            unless image_width_along_with_container
              if block.settings.full_page_width
                assign image_container_style = 'container-topic px-0'
                assign enable_image_rounded = false
              else
                assign image_container_style = 'container'
              endif
            endunless
          %}
          <div class="{{ split_item_style }} stacked-image-text__image-{{ block.id }}">
            <div class="{{ image_container_style }}">
              <div class="{{ image_height }} img-wrapper rigid-wrapper rounded">
                <picture>
                  {% if block.settings.mobile_image != blank %}
                    <source media="(max-width: 1023px)" sizes="(max-width: 1023px) 100vw, 1023px"
                      srcset="{%- if block.settings.mobile_image.width >= 414 -%}{{ block.settings.mobile_image | img_url: '414x' }} 414w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 600 -%}{{ block.settings.mobile_image | img_url: '600x' }} 600w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 828 -%}{{ block.settings.mobile_image | img_url: '828x' }} 828w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 1000 -%}{{ block.settings.mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 1200 -%}{{ block.settings.mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
                      {%- if block.settings.mobile_image.width >= 2400 -%}{{ block.settings.mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}">
                  {% endif %}
                  {% if block.settings.desktop_image != blank %}
                    <img class="object-fit-cover{% if enable_image_rounded %} rounded-3{% endif %}"
                      srcset="{%- if block.settings.desktop_image.width >= 1200 -%}{{ block.settings.desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                        {%- if block.settings.desktop_image.width >= 1920 -%}{{ block.settings.desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                        {%- if block.settings.desktop_image.width >= 2400 -%}{{ block.settings.desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                        {%- if block.settings.desktop_image.width >= 3840 -%}{{ block.settings.desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                      src="{{ block.settings.desktop_image | img_url: '750x' }}"
                      loading="lazy"
                      alt="{{ block.settings.desktop_image.alt | escape }}"
                      width="{{ block.settings.desktop_image.width }}"
                      height="{{ block.settings.desktop_image.height }}">
                  {% elsif block.settings.mobile_image != blank %}
                      <img class="object-fit-cover{% if enable_image_rounded %} rounded-3{% endif %}"
                      srcset="{%- if block.settings.mobile_image.width >= 414 -%}{{ block.settings.mobile_image | img_url: '414x' }} 414w,{%- endif -%}
                        {%- if block.settings.mobile_image.width >= 600 -%}{{ block.settings.mobile_image | img_url: '600x' }} 600w,{%- endif -%}
                        {%- if block.settings.mobile_image.width >= 828 -%}{{ block.settings.mobile_image | img_url: '828x' }} 828w,{%- endif -%}
                        {%- if block.settings.mobile_image.width >= 1000 -%}{{ block.settings.mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
                        {%- if block.settings.mobile_image.width >= 1200 -%}{{ block.settings.mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
                        {%- if block.settings.mobile_image.width >= 2400 -%}{{ block.settings.mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}
                        {%- if block.settings.mobile_image.width >= 3840 -%}{{ block.settings.mobile_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                        src="{{ block.settings.mobile_image | img_url: '750x' }}"
                        loading="lazy"
                        alt="{{ block.settings.mobile_image.alt | escape }}"
                        width="{{ block.settings.mobile_image.width }}"
                        height="{{ block.settings.mobile_image.height }}">
                  {% endif %}
                  {% if block.settings.desktop_image == blank and block.settings.mobile_image == blank %}
                    <div class="object-fit-colver img-placeholder border{% if enable_image_rounded %} rounded-3{% endif %}">
                      {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                    </div>
                  {% endif %}
                </picture>
                {% if section.settings.enable_image_link %}
                  {% if show_stretched_link %}
                    <a  {% if stretched_link contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ stretched_link }}" class="stretched-link"></a>
                  {% endif %}
                {% endif %}
              </div>
            </div>
          </div>
        {%- when 'button' -%}
          {%- liquid
            case block.settings.button_set_style
              when 'solid_with_outline'
                assign first_button_class = 'mx-2 btn-'
                assign second_button_class = 'mx-2 btn-outline-'
                assign parent_class = 'mx-n2'
              when 'solid_with_text_link'
                assign first_button_class = 'mx-3 btn-'
                assign second_button_class = 'mx-3 btn-link link-'
                assign parent_class = 'mx-n3'
              when 'outline'
                assign first_button_class = 'mx-2 btn-outline-'
                assign second_button_class = 'mx-2 btn-outline-'
                assign parent_class = 'mx-n2'

              when 'outline_with_text_link'
                assign first_button_class = 'mx-3 btn-outline-'
                assign second_button_class = 'mx-3 btn-link link-'
                assign parent_class = 'mx-n3'
              when 'text_link'
                assign first_button_class = 'mx-3 btn-link link-'
                assign second_button_class = 'mx-3 btn-link link-'
                assign parent_class = 'mx-n3'
            endcase
          %}
          <div class="{{ split_item_style }}">
            <div class="overflow-hidden">
              <div class="mt-n2 {{ parent_class }}">
                {% if block.settings.button_label_1 != blank or block.settings.button_label_2 != blank %}
                  {%- if block.settings.button_label_1 != blank -%}
                    {%- comment -%} <a {% render 'link', link: block.settings.button_link_1 %} href="{{ block.settings.button_link_1 }}"
                      class="btn btn-{{ btn_style }}  with-stretched-link mt-2 mx-3">
                      {{ block.settings.button_label_1 }}
                    </a> {%- endcomment -%}

                    {%- if block.settings.button_link_1 != blank -%}
                      <a {% render 'link', link: block.settings.button_link_1 %} href="{{ block.settings.button_link_1 }}" class="btn {{ first_button_class }}{{ btn_style }}  with-stretched-link mt-2">
                        {{ block.settings.button_label_1 }}
                      </a>
                    {%- else -%}
                      <div class="btn {{ first_button_class }}{{ btn_style }}  with-stretched-link mt-2 disabled cursor-default">
                        {{ block.settings.button_label_1 }}
                      </div>
                    {%- endif -%}
                  {%- endif -%}
                  {%- if block.settings.button_label_2 != blank -%}
                    {%- if block.settings.button_link_2 != blank -%}
                      <a {% render 'link', link: block.settings.button_link_2 %} href="{{ block.settings.button_link_2 }}" class="btn {{ second_button_class }}{{ btn_style }}  with-stretched-link mt-2">
                        {{ block.settings.button_label_2 }}
                      </a>
                    {%- else -%}
                      <div class="btn {{ second_button_class }}{{ btn_style }}  with-stretched-link mt-2 disabled cursor-default">
                        {{ block.settings.button_label_2 }}
                      </div>
                    {%- endif -%}
                  {%- endif -%}
                {% endif %}
              </div>
            </div>
          </div>
      {%- endcase -%}
    {%- endfor -%}
  </div>
</div>

{% schema %}
  {
    "name": "Stacked image with text",
    "class": "stacked-image-text",
    "settings": [
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_width",
        "label": "Desktop text width",
        "options": [
          {
            "value": "col-md-8",
            "label": "2/3"
          },
          {
            "value": "col-md-6",
            "label": "1/2"
          },
          {
            "value": "col-md-4",
            "label": "1/3"
          }
        ],
        "default": "col-md-6"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "text_alignment",
        "label": "Desktop text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "select",
        "id": "mobile_text_alignment",
        "label": "Mobile text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "header",
        "content": "Advanced settings"
      },
      {
        "type": "select",
        "id": "fontsize",
        "label": "Fontsize",
        "options": [
          {
            "value": "display-4",
            "label": "Extra large"
          },
          {
            "value": "display-5",
            "label": "Large"
          },
          {
            "value": "h1",
            "label": "Medium"
          },
          {
            "value": "h2",
            "label": "Small"
          },
          {
            "value": "h3",
            "label": "Extra small"
          }
        ],
        "default":   "h1"
      },
      {
        "type": "color",
        "id": "background_color",
        "label": "Background color",
        "info": "Choose a background color to overide preview selection of background color"
      },
      {
        "type": "checkbox",
        "id": "padding_to_full_section",
        "label": "Use background color on full section",
        "default": false
      },
      {
        "type": "select",
        "id": "section_margin_top",
        "label": "Section top space",
        "options": [
          {
            "value": "",
            "label": "None"
          },
          {
            "value": "mt-3",
            "label": "Small"
          },
          {
            "value": "mt-section",
            "label": "Large"
          }
        ],
        "default": ""
      },
      {
        "type": "select",
        "id": "section_margin_bottom",
        "label": "Section bottom space",
        "options": [
          {
            "value": "",
            "label": "None"
          },
          {
            "value": "mb-3",
            "label": "Small"
          },
          {
            "value": "mb-section",
            "label": "Large"
          }
        ],
        "default": ""
      },
      {
        "type": "checkbox",
        "id": "enable_image_link",
        "label": "Enable image link",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "desktop_image",
            "label": "Desktop image"
          },
          {
            "type": "image_picker",
            "id": "mobile_image",
            "label": "Mobile image"
          },
          {
            "type": "select",
            "id": "image_height",
            "label": "Image height",
            "options": [
              {
                "value": "adapt_to_image",
                "label": "Adapt to image"
              },
              {
                "value": "small",
                "label": "Small"
              },
              {
                "value": "medium",
                "label": "Medium"
              },
              {
                "value": "large",
                "label": "Large"
              }
            ],
            "default": "adapt_to_image"
          },
          {
            "type": "checkbox",
            "id": "full_page_width",
            "label": "Fits viewport width",
            "default": false
          }
        ]
      },
      {
        "type": "overline",
        "name": "Overline",
        "settings": [
          {
            "type": "text",
            "id": "overline",
            "default": "Overline",
            "label": "Overline"
          }
        ]
      },
      {
        "type": "heading",
        "name": "Heading",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "label": "Heading",
            "default": "Brief and eye-catching tagline"
          }
        ]
      },
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.<\/p>"
          },
          {
            "type": "checkbox",
            "id": "enlarge_text",
            "label": "Enlarge text",
            "default": false
          }
        ]
      },
      {
        "type": "button",
        "name": "Button",
        "settings": [
          {
            "type": "text",
            "id": "button_label_1",
            "default": "Button label",
            "label": "Primary button label"
          },
          {
            "type": "url",
            "id": "button_link_1",
            "label": "Primary button link"
          },
          {
            "type": "text",
            "id": "button_label_2",
            "default": "Button label",
            "label": "Secondary button label"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Secondary button link"
          },
          {
            "type": "select",
            "id": "button_set_style",
            "label": "Button set style",
            "options": [
              {
                "value": "solid_with_outline",
                "label": "Solid button with Outlined button"
              },
              {
                "value": "solid_with_text_link",
                "label": "Solid button with Text link"
              },
              {
                "value": "outline",
                "label": "Outlined button"
              },
              {
                "value": "outline_with_text_link",
                "label": "Outlined button with Text link"
              }, {
                "value": "text_link",
                "label": "Text link"
              }
            ],
            "default": "solid_with_outline"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Stacked image with text",
        "blocks": [
          {
            "type": "heading"
          },
          {
            "type": "text"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}
